<!DOCTYPE html>
<html>

	<head>
		<!--
        	作者：刘开新
        	时间：2018-09-20
        	描述：登录作业
        -->
		<meta charset="utf-8" />
		<title>刘开新的登录页面</title>
		<link rel="stylesheet" href="../base/plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="../base/plugins/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" href="../base/plugins/buttonCaptcha/jquery.buttonCaptcha.styles.css" />
		<link rel="stylesheet" href="../base/plugins/jquery-ui/jquery-ui.min.css" />
		<style type="text/css">
			body {
				background: url("../img/login_bg.jpg") no-repeat center center fixed;
				background-size: 100% 100%;
			}
			
			.login {
				width: 480px;
				height: 500px;
				background-color: black;
				margin: 10% auto;
				background-color: rgba(9, 10, 42, 0.4078);
				border-radius: 10px;
				color: aliceblue;
			}
			
			div>h2 {
				text-align: center;
				font-size: 25px padding:10px;
				border-bottom: 1px solid aliceblue;
			}
			
			.center {
				width: 500px;
				margin-left: 17%;
				margin-top: 30px;
			}
			
			.buttom {
				margin-left: 20%;
				margin-top: 22px;
			}
			
			.center input {
				width: 300px;
				height: 48px;
			}
		</style>
	</head>

	<body>
		<div class="login">
			<form class="layui-form" action="">
				<div>
					<h2>登陆界面</h2></div>
				<div class="center">
					<input id="account" class="layui-input" lay-verify="required" type="text " name="zhanghao" placeholder="请输入账号"><br>
				</div>
				<div class="center">
					<input id="password" class="layui-input" lay-verify="required" type="password" name="pas" placeholder="请输入密码"><br>
				</div>
				<div class="center">
					<label class="layui-form-label">记住账号？</label>
					<input id="box" lay-skin="switch" type="checkbox" name="zzz" lay-text="否|是" >
				</div>
				<div class="buttom">
					<button class="layui-btn layui-col-lg-offset1 lgin" lay-submit>登录</button>
				</div>
			</form>
		</div>

		<script src="../base/js/jquery-1.11.3.min.js"></script>
		<script src="../base/plugins/layui/layui.js"></script>
		<script type="text/javascript" src="../base/plugins/buttonCaptcha/jquery.buttonCaptcha.js"></script>
		<script src="../base/plugins/jquery-ui/jquery-ui.min.js"></script>
		<script src="../"></script>
		<script type="text/javascript">
			/*$.getJSON("system/userManager/json/login.json",function(data){
				$.each(data, function(infoIndex,info) {
					$("#account").val(info["user_account"]);
					$("#password").val(info["user_password"]);					
				});
							
			});	*/	
			layui.use('form', function() {
				var form = layui.form;
				form.render();
				function login(account,passwor){
					$.ajax({
						type:"get",//请求类型  get（更快）或者post（更安全） 
						url:"../base/data/login/login.json",
						async:true, //true（异步请求，快）false（同步请求，慢）
						data:{   
						//设置参数
						"account":account,
						"password":passwor
						},
						
						//ajax执行之前会执行beforeSend，是一个回调函数。
						"beforeSend":function(){
						
							var index = layer.load(1,{
								shade:[0.5,'black'] //第一个参数透明度 ，第二个参数是颜色
							});
						},
						
						
						//ajax执行成功才会执行success，是一个回调函数。
						"success":function(result){ 
							//result为ajax所响应的数据
						
							console.log(result);
							if(result.code==0){
								alert(result.data.user_id);
								localStorage.setItem("userId",result.data.user_id);
								localStorage.setItem("userName",result.data.name);
								localStorage.setItem("headImg",result.data.head_img_url);
								location.href="system/index11.html";
							}else{
								layer.msg("登录失败",{
									icon:2,  //图标
									time:5000,  //时间
									top:300,
									left:500
								});
							}
						},
						
						//如果路径错了，执行这个回调函数"error"
						"error":function(){
							layer.msg("未知错误",{
									icon:2,  //图标
									time:1000,  //时间
									top:300,
									left:500
								});
							/*
							 * 这是一个弹框，layui的
							 * layer.alert("服务器崩溃啦",{
								icon:2,
								btn:["取消","确定"]
							})*/
						}
						
					});
				}
				

				$(".lgin").click(function() {
					var account = $("#account").val();
					var passwor = $("#passwor").val();
						login(account,passwor)
					if($("#box").is(":checked")) {
						
						if(account != "" && passwor != "") {
							localStorage.setItem("userName", account);
							localStorage.setItem("password", passwor);
							alert("记住了账号密码！！！");
						} else {
							alert("请输入账号密码！！！");
						}
					} else {
						localStorage.clear();
						alert("未记住密码！！！");
					}
					
				});

				function addUnlock() {
					$(".captcha_gbws_wrap").remove();
					$(".lgin").buttonCaptcha({
						codeWord: 'abcd', //匹配的验证码
						codeZone: "abcd",
						captchaHeader: "请正确的将字符移动到框内",
						captchaUnlocked: "通过验证"
					});
					$(".captcha_gbws_wrap").appendTo("#verifyGroup");
				}
				//addUnlock();
				
			});
		</script>

	</body>

</html>